<template>
  <div class="employment-industry-six">
    <echarts-temp :options="options"></echarts-temp>
  </div>
</template>
<script>
export default {
  name: 'EmploymentIndustrySix',

  data() {
    return {
      options: {}
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    getInitData() {
      // 制定配置项和数据
      this.options = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          confine: true
        },
        color: [
          '#006cff',
          '#60cda0',
          '#cd8884',
          '#ff9f7f',
          '#0096ff',
          '9fe6b8',
          '#32c5c9',
          '#1d9dff'
        ],
        legend: {
          bottom: '0%',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: '12'
          },
          data: ['云南', '北京', '山东', '河北', '江苏', '浙江', '四川', '湖北']
        },
        series: [
          {
            name: '地区分布',
            type: 'pie',
            // 图形的文字标签
            label: { fontSize: 10 },
            // 链接图形和文字的线条
            labelLine: {
              // length链接图形的线条
              length: 6,
              // 链接文字的线条
              length2: 8
            },
            // 设置圆饼图的大小
            radius: ['10%', '70%'],
            // 图表位置
            center: ['50%', '50%'],
            // 图标模式
            roseType: 'radius',
            data: [
              { value: 20, name: '云南' },
              { value: 26, name: '北京' },
              { value: 24, name: '山东' },
              { value: 25, name: '河北' },
              { value: 20, name: '江苏' },
              { value: 25, name: '浙江' },
              { value: 30, name: '四川' },
              { value: 42, name: '湖北' }
            ]
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.employment-industry-six {
  height: 100%;
  height: 100%;
}
</style>
